import { useState } from 'react'
import './index.scss'
import { Button } from 'antd'
import axios from '../../utils/axios'

function List() {
	const [list, setList] = useState([])
	const [res, setRes] = useState('')
	const str = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
	const add = () => {
		setList([...list, list.length + 1])
	}
	const onDelete = (index) => {
		// const listFilter = list.filter((_, i) => i !== index)
		// setList(listFilter)

		// 第二种方式
		list.splice(index, 1)
		setList([...list])
		console.log(list)
	}

	const post = async () => {
		const { code, data } = await axios.get('/api/users/')
		if (code === 0 && data) setRes(data)
	}

	return (
		<div className="page-list">
			<ul>
				<li>这是第一行</li>
				{
					list.map((o, i) => (
						<li key={i} flex="main:justify">
							这是第{str[i + 2]}行
							<button className='color-primary' onClick={onDelete.bind(this, i)}>删除列表</button>
						</li>
					))
				}
			</ul>
			<button className='add' onClick={add}>新增一行</button>
			<div className='mt--20' flex="main:center cross:center">
				<Button type="primary" onClick={post}>请求express</Button>
			</div>
			<div>{res}</div>
		</div>
	)
}

export default List